<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{URL::asset('js/echarts.js')}}"></script>
<script src="{{URL::asset('js/customed.js')}}"></script>
<script src="{{URL::asset('js/jspdf.min.js')}}"></script>
<script src="{{URL::asset('js/html2canvas.js')}}"></script>
<script src="{{URL::asset('js/jquery.js')}}"></script>

<style>
    .headDiv{
        height: 10mm;
        width: 210mm;
    }

    .area{
        height:22mm;
        width:180mm;
        background:none;
        resize:none;
        font-size:14px;
        border: 3px solid #ffffff;
        border-radius: 15px;
        color: #ffffff;
    }

    .temp{
        height:22mm;
        width:180mm;
        margin-left:15mm;
        /* margin-top:5mm; */
        margin-bottom:5mm;
        float:left;
    }

    .DivF1{
        height: 100mm;
        width: 130mm;
        margin: 0 auto;
        margin: auto auto auto 10mm;
        float: left;
    }

    .DivF2{
        height: 60mm;
        width: 70mm;
        margin: 40mm auto 0 auto;
        float: left;
        font-size:18px;
        color: #ffffff;
    }

    .DivF3{
        height: 90mm;
        width: 200mm;
        margin: 0 auto;
        margin: auto auto auto 10mm;
        float: left;
    }

    .DivF4{
        height: 22mm;
        width: 200mm;
        float: left;
        font-size:18px;
        color: #ffffff;
        text-align:center;
    }

    .DivS_1{
        height: 90mm;
        width: 100mm;
        margin-left:10mm;
        float: left;
    }

    .DivS_2{
        height: 90mm;
        width: 100mm;
        margin: 0 auto;
        float: left;
    }

    .DivS_3{
        height:10mm;
        width:180mm;
        background:none;
        resize:none;
        font-size:18px;
        margin-left: 15mm;
        /*margin-top:5mm;*/
        color: #ffffff;
        /*padding: 2mm 8mm 2mm 8mm;*/
        float: left;
    }

    .DivR{
        height: 100mm;
        width: 200mm;
        padding:0 5mm 0 5mm;
        float: left;
    }
</style>
<div id="page-wrapper">
    <div class="box box-body" id="chart_container" style="width:210mm;padding:0 !important;margin: 0 auto;">
    </div>
    <div style="text-align: center;margin-top: 10mm;margin-bottom: 10mm;">
        <button id="btn_save" class="btn btn-success" style="width: 50mm;height: 20mm;font-size: larger;font-weight: bolder" onclick="save_memo()">保存评语</button>
        <button id="btn_pdf" class="btn btn-danger" style="width: 50mm;height: 20mm;font-size: larger;font-weight: bolder" onclick="o_window()">保存为PDF</button>
    </div>
</div>
<script type="text/javascript">
    var color = '';
    var indicator = [];
    var radar={person:[],camp:[]};
    $(document).ready(function(){
        var url = window.location.href;
        pid = url.split('=')[2];

        var request = {id:pid};
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
        $.post('/admin/kly_report_get',request,function(e){
            var stu = e.student;
            var item = e.item;
            var common = e.common;
            var camp = e.camp;
            var i = 0;
            var memo = e.memo;
            var stu_id = "{{$id}}";
            for(x in stu){
                if(x != parseInt(stu_id)){
                    continue;
                }
                var url = camp.cover;
                var html = '<div id="page0-'+i+'" style="width:210mm;height:297mm;background:url('+url+') no-repeat;background-size:210mm 297mm;margin:0;padding:0;">';
                html += '<div style="padding-left: 61mm;padding-top:213.5mm;color: '+e.color.text+';;font-size: 6.5mm;font-family:PingFangSC-Semibold;line-height:13.2mm;">';
                html += '<div>'+stu[x].ch_name+'</div><div>'+stu[x].en_name+'</div><div>'+e.camp_name+'</div><div>'+e.tutor+'</div></div>';
                html += '</div>';
                $('#chart_container').append(html);
                $('#chart_container').attr('stu_name',stu[x].ch_name+'-'+stu[x].en_name);

                var j = 0;

                //第一页
                url = camp.background;
                html = '<div id="page'+(Math.floor(j/2)+1)+'-'+i+'" style="width:210mm;height:297mm;background:url('+url+') no-repeat;background-size:210mm 297mm;margin:0;padding:0;"></div>';
                $('#chart_container').append(html);
                html = '<div class="temp"><textarea type="text" class="area" id="area2" style="height:255px;overflow:hidden;font-size:11px;margin-top:10px"></textarea></div>\n';
                $('#page'+(Math.floor(j/2)+1)+'-'+i).append(html);


                //考勤
                html = '<div style="padding-top:250px">\n' +
                    '    <div class="headDiv"></div>\n' +
                    '    <div id="div1" class="DivF1"></div>\n' +
                    '    <div id="div2" class="DivF2"></div>\n' +
                    '</div>';
                $('#page'+(Math.floor(j/2)+1)+'-'+i).append(html);
                var dom1 = document.getElementById("div1");
                var myChart1 = echarts.init(dom1);
                var data = [];
                var tag = 0;
                data.push(stu[x]['kaoqin'].rate);
                data.push(common['small_'+'kaoqin']);
                data.push(common['big_'+'kaoqin']);

                var temp_indi = {};
                temp_indi.name = '考勤'+'全勤率';
                temp_indi.max = 100;
                indicator.push(temp_indi);

                var name = temp_indi.name;

                radar.person.push(stu[x]['kaoqin'].rate);
                radar.camp.push(common['small_'+'kaoqin']);
                option = {
                    legend: {
                        textStyle:{
                            color:e.color.text
                        },
                        right:1
                    },
                    tooltip: {},
                    title: {
                        text:name,
                        textStyle:{
                            color:e.color.text
                        },
                    },
                    color:e.color.image,
                    xAxis: {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        }
                    },
                    yAxis: {
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        },
                        splitLine:{
                            lineStyle:{
                                color:e.color.split
                            }
                        }
                    },
                    series: [
                        {type: 'bar',label: {normal: {
                                    show: true,
                                    position: 'top',
                                    color:e.color.image_display,
                                    formatter: '{a}\n{c}',
                                    fontSize: 16,
                                }},data:[data[0]],name:'个人'},
                        {type: 'bar',label: {normal: {
                                    show: true,
                                    position: 'top',
                                    color:e.color.image_display,
                                    formatter: '{a}\n{c}',
                                    fontSize: 16,
                                }},data:[data[1]],name:'小营'},
                        {type: 'bar',label: {normal: {
                                    show: true,
                                    position: 'top',
                                    color:e.color.image_display,
                                    formatter: '{a}\n{c}',
                                    fontSize: 16,
                                }},data:[data[2]],name:'大营'}
                    ]
                };

                myChart1.setOption(option);
                $('#div2').text(stu[x]['kaoqin'].rate_memo);

                $('#div1').removeAttr('id');
                $('#div2').removeAttr('id');
                $('#area-1').removeAttr('id');




                //作业准交率
                html = '<div >\n' +
                    '    <div class="headDiv"></div>\n' +
                    '    <div id="div1" class="DivF3"></div>\n' +
                    '</div>';
                var temp_indi = {};
                temp_indi.name = '视频作业'+'准交率';
                temp_indi.max = 100;
                indicator.push(temp_indi);

                var name = temp_indi.name;

                radar.person.push(stu[x]['zuoye'].rate);
                radar.camp.push(common['small_'+'zuoye']);

                $('#page'+(Math.floor(j/2)+1)+'-'+i).append(html);
                var dom1 = document.getElementById("div1");
                var myChart1 = echarts.init(dom1);
                var data = [];
                var tag = 0;

                data.push(stu[x]['zuoye'].rate);
                data.push(common['small_'+'zuoye']);
                data.push(common['big_'+'zuoye']);

                option = {
                    legend: {
                        textStyle:{
                            color:e.color.text
                        },
                        right:1
                    },
                    tooltip: {},
                    title: {
                        text:name,
                        textStyle:{
                            color:e.color.text
                        },
                    },
                    xAxis: {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        }
                    },
                    yAxis: {
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        },
                        splitLine:{
                            lineStyle:{
                                color:e.color.split
                            }
                        }
                    },
                    color:e.color.image,
                    series: [
                        {type: 'bar',label: {normal: {
                                    show: true,
                                    position: 'top',
                                    color:e.color.image_display,
                                    formatter: '{a}\n{c}',
                                    fontSize: 16,
                                }},data:[data[0]],name:'个人'},
                        {type: 'bar',label: {normal: {
                                    show: true,
                                    position: 'top',
                                    color:e.color.image_display,
                                    formatter: '{a}\n{c}',
                                    fontSize: 16,
                                }},data:[data[1]],name:'小营'},
                        {type: 'bar',label: {normal: {
                                    show: true,
                                    position: 'top',
                                    color:e.color.image_display,
                                    formatter: '{a}\n{c}',
                                    fontSize: 16,
                                }},data:[data[2]],name:'大营'}
                    ]
                };
                myChart1.setOption(option);
                $('#div1').removeAttr('id');


                //第二页
                url = camp.background;
                html = '<div id="page'+(Math.floor(j/2)+1)+'-'+'1'+'" style="width:210mm;height:297mm;background:url('+url+') no-repeat;background-size:210mm 297mm;margin:0;padding:0;"></div>';
                $('#chart_container').append(html);


                //作业分数
                html = '<div>\n' +
                    '    <div class="headDiv"></div>\n' +
                    '    <div id="div1" class="DivF3"></div>\n' +
                    '    <div id="div2" class="DivF4"></div>\n' +
                    '    <div class="temp"><textarea type="text" class="area" id="area1"></textarea></div>\n' +
                    '</div>';
                $('#page'+(Math.floor(j/2)+1)+'-'+'1').append(html);

                var dom1 = document.getElementById("div1");
                var myChart1 = echarts.init(dom1);

                var temp_indi = {};
                temp_indi.name = '作业'+'分数';
                temp_indi.max = 100;
                indicator.push(temp_indi);

                var name = temp_indi.name + '(满分:100)';

                radar.person.push(stu[x]['zuoye'].avg);
                radar.camp.push(common['small_'+'zuoye'+'_avg']);

                option = {
                    title: {
                        text: name,
                        textStyle:{
                            color:e.color.text
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color:e.color.image,
                    legend: {
                        data:['个人','小营','大营'],
                        textStyle:{
                            color:e.color.text
                        },
                        right:1
                    },
                    grid: {},
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:e.date,
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        },
                        splitLine:{
                            lineStyle:{
                                color:e.color.split
                            }
                        },
                        min:0,
                    },
                    series: [
                        {
                            name:'个人',
                            type:'line',
                            data:Object.keys(stu[x]['zuoye'].all).map(function (key) {
                                return stu[x]['zuoye'].all[key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        },
                        {
                            name:'小营',
                            type:'line',
                            data:Object.keys(common['small_'+'zuoye'+'_score']).map(function (key) {
                                return common['small_'+'zuoye'+'_score'][key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        },
                        {
                            name:'大营',
                            type:'line',
                            data:Object.keys(common['big_'+'zuoye'+'_score']).map(function (key) {
                                return common['big_'+'zuoye'+'_score'][key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        }
                    ]
                };
                myChart1.setOption(option);

                $('#div2').text(stu[x]['zuoye'].score_memo);
                $('#div1').removeAttr('id');
                $('#div2').removeAttr('id');


                //词汇分数
                html = '<div>\n' +
                    '    <div class="headDiv"></div>\n' +
                    '    <div id="div1" class="DivF3"></div>\n' +
                    '    <div id="div2" class="DivF4"></div>\n' +
                    '    <div class="temp"><textarea type="text" class="area" id="area1"></textarea></div>\n' +
                    '</div>';
                $('#page'+(Math.floor(j/2)+1)+'-'+'1').append(html);

                var dom1 = document.getElementById("div1");
                var myChart1 = echarts.init(dom1);

                var temp_indi = {};
                temp_indi.name = 'TED词汇赏析测试'+'分数';
                temp_indi.max = 100;
                indicator.push(temp_indi);

                var name = temp_indi.name + '(满分:70)';

                var num = 0;
                num = stu[x]['words_exam'].avg * 100 / 70;
                radar.person.push(num.toFixed(2));
                num = common['small_'+'words_exam'+'_avg'] * 100 /70;
                radar.camp.push(num.toFixed(2));

                option = {
                    title: {
                        text: name,
                        textStyle:{
                            color:e.color.text
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color:e.color.image,
                    legend: {
                        data:['个人','小营','大营'],
                        textStyle:{
                            color:e.color.text
                        },
                        right:1
                    },
                    grid: {},
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:e.date,
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        },
                        splitLine:{
                            lineStyle:{
                                color:e.color.split
                            }
                        },
                        min:0,
                    },
                    series: [
                        {
                            name:'个人',
                            type:'line',
                            data:Object.keys(stu[x]['words_exam'].all).map(function (key) {
                                return stu[x]['words_exam'].all[key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        },
                        {
                            name:'小营',
                            type:'line',
                            data:Object.keys(common['small_'+'words_exam'+'_score']).map(function (key) {
                                return common['small_'+'words_exam'+'_score'][key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        },
                        {
                            name:'大营',
                            type:'line',
                            data:Object.keys(common['big_'+'words_exam'+'_score']).map(function (key) {
                                return common['big_'+'words_exam'+'_score'][key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        }
                    ]
                };
                myChart1.setOption(option);

                $('#div2').text(stu[x]['words_exam'].score_memo);
                $('#div1').removeAttr('id');
                $('#div2').removeAttr('id');



                //第三页
                url = camp.background;
                html = '<div id="page'+(Math.floor(j/2)+1)+'-'+'2'+'" style="width:210mm;height:297mm;background:url('+url+') no-repeat;background-size:210mm 297mm;margin:0;padding:0;"></div>';
                $('#chart_container').append(html);


                //阅读测试分数
                html = '<div>\n' +
                    '    <div class="headDiv"></div>\n' +
                    '    <div id="div1" class="DivF3"></div>\n' +
                    '    <div id="div2" class="DivF4"></div>\n' +
                    '    <div class="temp"><textarea type="text" class="area" id="area1"></textarea></div>\n' +
                    '</div>';
                $('#page'+(Math.floor(j/2)+1)+'-'+'2').append(html);

                var dom1 = document.getElementById("div1");
                var myChart1 = echarts.init(dom1);

                var temp_indi = {};
                temp_indi.name = '小托福阅读测试'+'分数';
                temp_indi.max = 100;
                indicator.push(temp_indi);

                var name = temp_indi.name + '(满分:30)';

                var num = 0;
                num = stu[x]['toef'].avg * 100 / 30;
                radar.person.push(num.toFixed(2));
                num = common['small_'+'toef'+'_avg'] * 100 /30;
                radar.camp.push(num.toFixed(2));

                option = {
                    title: {
                        text: name,
                        textStyle:{
                            color:e.color.text
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color:e.color.image,
                    legend: {
                        data:['个人','小营','大营'],
                        textStyle:{
                            color:e.color.text
                        },
                        right:1
                    },
                    grid: {},
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:e.date,
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: e.color.axis,//左边线的颜色
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: e.color.text,//坐标值得具体的颜色

                            }
                        },
                        splitLine:{
                            lineStyle:{
                                color:e.color.split
                            }
                        },
                        min:0,
                    },
                    series: [
                        {
                            name:'个人',
                            type:'line',
                            data:Object.keys(stu[x]['toef'].all).map(function (key) {
                                return stu[x]['toef'].all[key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        },
                        {
                            name:'小营',
                            type:'line',
                            data:Object.keys(common['small_'+'toef'+'_score']).map(function (key) {
                                return common['small_'+'toef'+'_score'][key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        },
                        {
                            name:'大营',
                            type:'line',
                            data:Object.keys(common['big_'+'toef'+'_score']).map(function (key) {
                                return common['big_'+'toef'+'_score'][key];
                            }),
                            itemStyle : { normal: {label : {show: true},textStyle:{color:e.color.text}}},
                            lineStyle : {normal:{width:3}}
                        }
                    ]
                };
                myChart1.setOption(option);

                $('#div2').text(stu[x]['toef'].score_memo);
                $('#div1').removeAttr('id');
                $('#div2').removeAttr('id');


                html = '<div>\n' +
                    '    <div class="headDiv"></div>\n' +
                    '    <div id="div1" class="DivR"></div>\n' +
                    '    <div class="temp"><textarea type="text" class="area" id="area3" style="height:45mm"></textarea></div>\n' +
                    '</div>';

                $('#page'+(Math.floor(j/2)+1)+'-'+'2').append(html);
                var dom1 = document.getElementById("div1");
                var myChart1 = echarts.init(dom1);
                var name = 'Speak Great五维能力图';
                option = {
                    title: {
                        text: ''
                    },
                    tooltip: {},
                    legend: {
                        data: ['个人','小营'],
                        left:10,
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    title:{
                        text:'Speak Great五维能力图',
                        textStyle:{
                            color:e.color.text
                        },
                        right:10
                    },
                    color:e.color.image,
                    radar: {
                        name: {
                            textStyle: {
                                color: e.color.text,
                                //backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5],
                                fontSize:20
                            }
                        },
                        indicator: indicator,
                        startAngle:30
                    },

                    series: [{
                        type: 'radar',
                        data : [
                            {
                                value : radar.person,
                                name : '个人'
                            },
                            {
                                value : radar.camp,
                                name : '小营'
                            }
                        ]
                    }]
                };
                myChart1.setOption(option);

                $('#div1').removeAttr('id');
                $('#area1').removeAttr('id');

                i++;
            }


            var area_list = $('.area');
            for(d=0;d<area_list.length;d++){
                $(area_list[d]).text(memo[d]);
            }
            $('.area').css('border-color',e.color.text);
            $('.area').css('color',e.color.text);
            $('.DivF2').css('color',e.color.text);
            $('.DivF4').css('color',e.color.text);
            $('.DivS_3').css('color',e.color.text);
            color = e.color.text;
        });
    });
    function o_window(){
        var wi = window.open('about:blank', '_blank');

        wi.document.write(document.getElementById('chart_container').outerHTML);

        /*        wi.document.getElementById('area-1').value = $('#area-1').val();
                wi.document.getElementById('area-2').value = $('#area-2').val();
                wi.document.getElementById('area-3').value = $('#area-3').val();
                wi.document.getElementById('area-4').value = $('#area-4').val();
                wi.document.getElementById('area-5').value = $('#area-5').val();
                wi.document.getElementById('area-6').value = $('#area-6').val();*/


        var listnew = wi.document.getElementsByTagName("canvas");
        var listold = document.getElementsByTagName("canvas");
        for(i=0;i<listold.length;i++){
            var ctx = listold[i].getContext('2d');
            var imgdata = ctx.getImageData(0,0,2500,7500
            );
            var ctxnew = listnew[i].getContext('2d');
            ctxnew.putImageData(imgdata,0,0);
        }

        var style = wi.document.createElement("style");
        style.innerHTML = '    .headDiv{\n' +
            '        height: 10mm;\n' +
            '        width: 210mm;\n' +
            '    }\n' +
            '\n' +
            '    .area{\n' +
            '        height:22mm;\n' +
            '        width:180mm;\n' +
            '        background:none;\n' +
            '        resize:none;\n' +
            '        font-size:14px;\n' +
            '        border: none;\n' +
            '        color: #ffffff;\n' +
            '    }\n' +
            '\n' +
            '    .temp{\n' +
            '        height:22mm;\n' +
            '        width:180mm;\n' +
            '        margin-left:15mm;\n' +
            '        /* margin-top:5mm; */\n' +
            '        margin-bottom:5mm;\n' +
            '        float:left;\n' +
            '    }\n' +
            '\n' +
            '    .DivF1{\n' +
            '        height: 100mm;\n' +
            '        width: 130mm;\n' +
            '        margin: 0 auto;\n' +
            '        margin: auto auto auto 10mm;\n' +
            '        float: left;\n' +
            '    }\n' +
            '\n' +
            '    .DivF2{\n' +
            '        height: 60mm;\n' +
            '        width: 70mm;\n' +
            '        margin: 40mm auto 0 auto;\n' +
            '        float: left;\n' +
            '        font-size:18px;\n' +
            '        color: #ffffff;\n' +
            '    }\n' +
            '\n' +
            '    .DivF3{\n' +
            '        height: 90mm;\n' +
            '        width: 200mm;\n' +
            '        margin: 0 auto;\n' +
            '        margin: auto auto auto 10mm;\n' +
            '        float: left;\n' +
            '    }\n' +
            '\n' +
            '    .DivF4{\n' +
            '        height: 22mm;\n' +
            '        width: 200mm;\n' +
            '        float: left;\n' +
            '        font-size:18px;\n' +
            '        color: #ffffff;\n' +
            '        text-align:center;\n' +
            '    }\n' +
            '\n' +
            '    .DivS_1{\n' +
            '        height: 90mm;\n' +
            '        width: 100mm;\n' +
            '        margin-left:10mm;\n' +
            '        float: left;\n' +
            '    }\n' +
            '\n' +
            '    .DivS_2{\n' +
            '        height: 90mm;\n' +
            '        width: 100mm;\n' +
            '        margin: 0 auto;\n' +
            '        float: left;\n' +
            '    }\n' +
            '\n' +
            '    .DivS_3{\n' +
            '        height:10mm;\n' +
            '        width:180mm;\n' +
            '        background:none;\n' +
            '        resize:none;\n' +
            '        font-size:18px;\n' +
            '        margin-left: 15mm;\n' +
            '        /*margin-top:5mm;*/\n' +
            '        color: #ffffff;\n' +
            '        /*padding: 2mm 8mm 2mm 8mm;*/\n' +
            '        float: left;\n' +
            '    }\n' +
            '\n' +
            '    .DivR{\n' +
            '        height: 100mm;\n' +
            '        width: 200mm;\n' +
            '        padding:0 5mm 0 5mm;\n' +
            '        float: left;\n' +
            '    }';

        wi.document.body.appendChild(style);


        var div1 = wi.document.getElementById("chart_container");
        /*            div1.style.position = 'fixed';
                    div1.style.top = '0px';
                    div1.style.left = '0px';*/

        wi.opener.export_pdf(div1);
        setTimeout(function(){
            wi.close();
        },1000);
    }

    function export_pdf(div1){
        var contentWidth = 0;
        var contentHeight = 0;
        var w = parseInt(window.getComputedStyle(div1).width);
        var h = parseInt(window.getComputedStyle(div1).height);
        var canvas1 = document.createElement("canvas");
        canvas1.getContext("2d").scale(3, 3);
        canvas1.getContext("2d").imageSmoothingEnabled = false;

        html2canvas(div1, {canvas:canvas1,width:div1.offsetWidth,height:div1.offsetHeight,logging:false,scale:3}).then(function(canvas) {
            contentWidth = canvas.width;
            contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 595.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 595.825 / contentWidth * contentHeight;
            //canvas.getContext("2d").translate(-500,-20);
            var pageData = canvas.toDataURL('image/jpeg', 0.95);
            //console.log(pageData);
            //注①
            var pdf = new jsPDF('', 'pt', 'a4');
            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else {
                while (leftHeight > 0) {
                    //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if (leftHeight > 100) {
                        //注②
                        pdf.addPage();
                    }
                }
            }

            pdf.save(div1.getAttribute('stu_name')+'.pdf');
        });
    }

    function save_memo(){
        var url = window.location.href;
        pid = url.split('=')[2];

        var area_list = $('.area');
        var memo = [];
        var request = {pid:pid};
        for(i=0;i<area_list.length;i++){
            memo.push(area_list[i].value);
        }
        request.memo = JSON.stringify(memo);
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},async:false});
        $.post('/admin/kly_report/save_memo',request,function(e){
            alert('操作成功');
        })
    }

    /*    function down_pdf(){
            var div1 = document.getElementById('chart_container');
            var contentWidth = 0;
            var contentHeight = 0;
            var w = parseInt(window.getComputedStyle(div1).width);
            var h = parseInt(window.getComputedStyle(div1).height);
            var canvas1 = document.createElement("canvas");
            //canvas1.getContext("2d").translate(20, 0);
            canvas1.getContext("2d").scale(1, 1);
            canvas1.style.width=w+'mm';
            canvas1.style.height=h+'mm';
            canvas1.width=w;
            canvas1.height=h;

            html2canvas(div1, {canvas:canvas1,allowTaint:true}).then(function(canvas) {
                contentWidth = canvas.width;
                contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28;
                var imgHeight = 604.375 / contentWidth * contentHeight;
                //canvas.getContext("2d").translate(-500,-20);
                var pageData = canvas.toDataURL('image/jpeg', 0.95);
                //console.log(pageData);
                //注①
                var pdf = new jsPDF('', 'pt', 'a4');
                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 100) {
                            //注②
                            pdf.addPage();
                        }
                    }
                }

                var section = $('#section').find("option:selected").text();
                var group = $('#group').find("option:selected").text();
                var squad = $('#squad').find("option:selected").text();
                var student = $('#student').find("option:selected").text();

                var name = section+'-'+group+'-'+squad+'-'+student;
                pdf.save(name+'.pdf');
            });
        }*/
</script>
